import React from 'react';
import { Button, Row, Col, Tooltip, Input } from 'antd';
import List from './list';
import CommonListsIndex from '../../../components/CommonLists/index';
import FilterToolNew from '../../../components/FilterTool/FilterToolNew';
import SearchBar from 'src/components/SearchBar';

class DataSource extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'dataSourceManage';
    this.addComponent = '/system/dataSource/add';
    this.editComponent = '/system/dataSource/id/edit';
    this.listsComponent = List;
    this.queryParams = {};
    this.queryPanigation = {};
    this.state = {
      depts: [],
      roles: [],
    };
    this.model_width = 500;
  }

  componentDidMount() {
    this.freshQueryList();
  }

  getColumns = () => {
    return [
      {
        title: '数据源名称',
        key: 'name',
        dataIndex: 'name',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '数据源code',
        key: 'code',
        dataIndex: 'code',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '数据源类型',
        key: 'type',
        dataIndex: 'type',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '描述',
        key: 'remark',
        dataIndex: 'remark',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '状态',
        key: 'status',
        dataIndex: 'status',
        ellipsis: true,
        render(text) {
          return text === 1 ? '启用' : '停用';
        },
      },

      {
        title: '修改时间',
        key: 'updateAt',
        dataIndex: 'updateAt',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '创建人/修改人',
        key: 'updateBy',
        dataIndex: 'updateBy',
        ellipsis: true,
        render(_, record) {
          const text = [record.updateBy, record.createBy].filter(Boolean).join('/');
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
    ];
  };
  getSearchList = () => {
    return [
      {
        name: 'name',
        component: <Input placeholder='数据源' />,
      },
      {
        name: 'code',
        component: <Input placeholder='code' />,
      },
      {
        name: 'createBy',
        component: <Input placeholder='创建人' />,
      },
      {
        name: 'updateBy',
        component: <Input placeholder='修改人' />,
      },
    ];
  };
  render() {
    const ListsComponent = this.listsComponent;

    return (
      <div>
        <SearchBar
          searchList={this.getSearchList()}
          query={this.freshQueryList}
          onChange={this.refreshFilter}
          reset={this.resetListAndSearch}
        />
        <div className='inner-content' style={{ marginTop: '10px' }}>
          <Row type='flex' justify='space-between' align='middle' className='pb-10'>
            <Col span={6}>
              <Button type='primary' onClick={this.add.bind(this, { title: '添加数据源' })}>
                添加
              </Button>
            </Col>
          </Row>
          <ListsComponent
            {...this.state}
            rowKey='id'
            edit={this.edit}
            queryList={this.freshQueryList}
            columns={this.getColumns()}
            onChangePagination={this.onChangePagination}
          />
        </div>
      </div>
    );
  }
}

export default DataSource;
